<!--
 * @Descripttion: 终止意向客户
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-25 16:47:05
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-05-04 13:46:49
-->
<template>
  <Popup class="termination" v-model:show="popShow" :title="title" :showConfirmButton="false" :showCancelButton="false">
    <div class="content">
      <div class="desc" v-if="showDesc">
        <div>{{ detailData.customerName }} {{ detailData.customerPhone }}</div>
        <div>意向加盟城市: {{ detailData.intendedCity }}</div>
        <div>所属办事处: {{ detailData.agencyName }}</div>
      </div>
      <qmp-field
        v-model="terminationCause"
        type="textarea"
        placeholder="填写终止原因"
        class="ctm-text-area"
        style="height: 44px"
      />
    </div>

    <slot name="foot">
      <div class="termination-pop-foot">
        <div class="btn" @click="onClear">取消</div>
        <div class="btn" @click="onSubmit">确认</div>
      </div>
    </slot>
  </Popup>
</template>

<script lang="ts">
  import { reactive, toRefs, computed, getCurrentInstance } from 'vue'
  import Popup from '@/components/Popup/index.vue'
  // import { Toast } from 'qmp-component'
  import { terminatetItem } from '@/apis/attractInvestment/potentialCustomer'
  import type { PropType } from 'vue'

  export default {
    name: 'Termination',
    components: { Popup },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      detailData: {
        type: [String, Object] as PropType<string | any>,
        default: ''
      },
      showDesc: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      }
    },
    setup(props: any, ctx: any) {
      interface datasModle {
        terminationCause: string
      }

      const datas = reactive<datasModle>({
        terminationCause: ''
      })
      const popShow = computed({
        set(val) {
          ctx.emit('update:show', val)
        },
        get() {
          return props.show
        }
      })
      const { proxy }: any = getCurrentInstance()
      const onSubmit = () => {
        // if (none.includes(datas.selectData)) {
        //   proxy.$toast('请选择招商经理')
        //   return
        // }
        const data = { id: props.detailData.id, terminationCause: datas.terminationCause }
        ctx.emit('submit', data)
      }
      const onClear = () => {
        popShow.value = false
      }
      return {
        ...toRefs(datas),
        popShow,
        onClear,
        onSubmit
      }
    }
  }
</script>

<style lang="less" scoped>
  .content {
    margin: 0 16px 24px;
  }
  .desc {
    font: var(--font-main-body);
    text-align: center;
    color: var(--texticon-default-strong);
    margin-bottom: 16px;
  }

  .termination-pop-foot {
    display: flex;
    border-top: 1px solid var(--divisionline-normal);
    border-radius: 0px 0px 8px 8px;

    .btn {
      flex: 1;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;

      font: var(--font-main-body);
      color: var(--texticon-default-weak);
      &:not(:first-child) {
        border-left: 1px solid var(--divisionline-normal);

        color: var(--texticon-color-brand-normal);
      }
    }
  }
</style>

<style lang="less">
  .termination {
    .pop-title {
      margin-bottom: 8px !important;
    }
  }
</style>
